<template>
    <div>
        <el-card>
            <el-tabs v-model="currentStatus" @tab-click="handleTabClick">
                <el-tab-pane label="待审核" name="0"></el-tab-pane>
                <el-tab-pane label="已通过" name="1"></el-tab-pane>
                <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
            </el-tabs>
            <br>
            <el-form :inline="true">
                <el-form-item label="学号">
                    <el-input v-model="currentUserId" placeholder="请输入学号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchList">查询</el-button>
                </el-form-item>
            </el-form>
            <br>
            <!-- 表头 -->
            <div style="height: 50px; line-height: 50px; text-align: center; backgroundColor: #eee; box-shadow: 5px 5px 2px #dedede;">
              <el-row>
                  <el-col :span="15" style="border-right: 1px solid #ddd">
                      <span>设备信息</span>
                  </el-col>
                  <el-col :span="3" style="border-right: 1px solid #ddd">
                      <span>用户信息</span>
                  </el-col>
                  <el-col :span="3" style="border-right: 1px solid #ddd">
                      <span>状态</span>
                  </el-col>
                  <el-col :span="3">
                      <span>操作</span>
                  </el-col>
              </el-row>
            </div>
            <div style="box-shadow: 5px 5px 2px #dedede; width: 100%; margin-bottom: 18px; border-left: 1px solid #eee; border-right: 1px solid #eee" v-for="(cardData, index) in tableData" :key="index">
                <div style="color: #aaa; padding-left: 20px; backgroundColor: #dedede; height: 30px; line-height: 30px;">
                    <span>2018-08-14 17:14:33</span>
                    <span style="margin-left: 15px;">编号：{{cardData.id}}</span>
                </div>
                <div>
                    <el-row>
                        <div style="border-right: 1px solid #eee; width: 62.5%; float: left">
                            <div style="border-bottom: 1px solid #eee; margin-bottom: 0px;" v-for="(device, deviceIndex) in cardData.devices" :key="deviceIndex" class="text item">
                                <div style="float: left; border: 1px solid #eee; height: 78px; width: 78px; margin: 5px; margin-top: 0px;">
                                    <!-- 图片 -->
                                    <div>
                                        <div v-if="!device.img" style="width: 78px; height: 78px; font-size: 78px;" class="iconfont icon-22222"></div>
                                        <div v-else style="width: 78px; height: 78px;">
                                          <img src="device.img" />
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <!-- 设备信息 -->
                                    <div style="height: 30px; margin-left: 105px; margin-top: 10px;">
                                        <span>{{`设备名称：${device.name}`}}</span>
                                    </div>
                                    <div style="height: 30px; margin-left: 105px;">
                                        <span>{{`设备型号：${device.model}`}}</span>
                                    </div>
                                    <div style="height: 30px; margin-left: 105px;">
                                        <span>{{`借用/库存：${device.needCount}/${device.count}`}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="border-right: 1px solid #eee; border-bottom: 1px solid #eee; width: 12.5%; float: left">
                            <div style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                                <el-popover
                                  placement="top-start"
                                  width="200"
                                  trigger="hover">
                                  <!-- 利用分发，取代content属性 -->
                                  <el-form label-width="80px;">
                                    <el-form-item label="学号：">
                                      {{cardData.userId}}
                                    </el-form-item>
                                    <el-form-item label="专业：">
                                      {{cardData.user.major}}
                                    </el-form-item>
                                    <el-form-item label="联系电话：">
                                      {{cardData.user.phone}}
                                    </el-form-item>
                                  </el-form>
                                  <el-button slot="reference" class="iconfont icon-ren-copy1" type="text">{{cardData.user.name}}</el-button>
                                </el-popover>
                                <!-- <el-button slot="reference" type="text" class="iconfont icon-ren-copy1">{{cardData.user.name}}</el-button> -->
                            </div>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                        <div style="border-right: 1px solid #eee; border-bottom: 1px solid #eee; width: 12.5%; float: left">
                            <span style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                              <span v-if="cardData.status == 0">审核中</span>
                              <span v-else-if="cardData.status == 1">已通过</span>
                              <span v-else-if="cardData.status == 2">已拒绝</span>
                            </span>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                        <div style="width: 12.5%; float: left; border-bottom: 1px solid #eee;">
                            <div>
                                <div v-if="cardData.status == 0" style="height: 100px; line-height: 50px; width: 100%; float: left; text-align: center;">
                                    <el-button size="mini" type="success" @click="dealToBorrow(index, 1)"><i class="iconfont  icon-tongguo"></i>通过</el-button><br>
                                    <el-button size="mini" type="danger" @click="dealToBorrow(index, 2)"><i class="iconfont  icon-weibiaoti522"></i>拒绝</el-button>
                                </div>
                                <div v-else-if="cardData.status == 1" style="height: 100px; line-height: 50px; width: 100%; float: left; text-align: center;">
                                    <el-button size="mini" type="success"><i class="iconfont  icon-paizhao"></i>拍照</el-button>
                                    <el-button size="mini" type="warning" @click="dealToBorrow(index, 3)"><i class="iconfont  icon-lend"></i>借出</el-button>
                                    <el-button size="mini" type="primary" @click.prevent="downLoad(index)"><i class="iconfont  icon-xiazai"></i>下载打印</el-button>
                                </div>
                                <div v-else-if="cardData.status == 2" style="height: 100px; line-height: 100px; width: 100%; float: left; text-align: center;">
                                    &nbsp;
                                </div>
                            </div>
                            <div v-for="i in cardData.devices.length-1" :key="i">
                                <span style="height: 101px; line-height: 101px;">&nbsp;</span>
                            </div>
                        </div>
                    </el-row>
                </div>
            </div>
            <br>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :pager-count="5"
                    :total="page.total"
                    :page-size="page.pageSize"
                    :current-page="page.currentPage"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
        <!-- 借出、通过申请的弹框 -->
        <el-dialog
            :title="dialog.title"
            :visible.sync="dialog.show"
            width="400px"
            center>
            <div v-if="dialog.status == 2">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入拒绝的原因"
                    v-model="dialog.refuseTextarea"
                >
                </el-input>
            </div>
            <div v-else>
                <span>{{dialog.content}}</span>
            </div>
            <span slot="footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="dealToBorrowSure(dialog.status)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      },
      currentStatus: '0', // 点击tabs变化时，currentStatus也会变化
      currentUserId: '',
      currentApplyId: '',
      currentIndex: '', // 当前操作的元素的下标
      dialog: {
        title: '提示',
        content: '',
        show: false,
        status: '',
        refuseTextarea: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 标签页
    handleTabClick(tab, event) {
      this.getList()
    },
    // 翻页器
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 获取列表
    getList() {
      request.get('/items/deviceApply/withDevice', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage,
        status: parseInt(this.currentStatus), // 传递的参数为整数
        userId: this.currentUserId // 学生学号（教职工工号）
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    },
    // 点击查询时搜索数据
    searchList() {
      this.getList()
    },
    // 通过、拒绝、借出
    dealToBorrow(index, status) { // 0：通过，1：拒绝，2：借出
      this.dialog.refuseTextarea = ''
      this.dialog.show = true
      this.dialog.status = status
      this.currentApplyId = this.tableData[index].id
      this.currentIndex = index
      switch (status) {
        case 1: // 通过申请
          this.dialog.content = '您确认通过当前项吗？'
          break
        case 2: // 拒绝申请
          this.dialog.content = '您确认拒绝当前项吗？'
          break
        case 3: // 借出
          this.dialog.content = '您确认借出当前项吗？'
          break
      }
    },
    dealToBorrowSure(status) {
      this.dialog.show = false
      request.put(`/items/deviceApply/applyCheck/${this.currentApplyId}?status=${status}`, {
        refused: this.dialog.refuseTextarea // 拒绝原因，若不是拒绝，则该参数置为空
      }).then(res => {
        if (res.code === 0) {
          this.tableData[this.currentIndex].status = status // 后台返回的数据中，0：待审核，1：已通过，2：已拒绝，3：已借出
          this.$message.success(res.content)
        } else {
          this.$message.error(res.content)
        }
      }).catch(err => {
        console.log('错误：', err)
      })
    },
    // 下载打印
    downLoad(index) {
      window.location.href = `/api/items/deviceApply/adminDownLoad/${this.tableData[index].id}`
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-bottom: 15px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 480px;
}
</style>
